import { Modal, Form, Input, Select, message } from 'antd'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import React from 'react'

interface AddSceneDialogProps {
  open: boolean
  onClose: () => void
  onConfirm: (data: any) => void
}

export default function AddSceneDialog({ open, onClose, onConfirm }: AddSceneDialogProps) {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [groups, setGroups] = useState<Array<{ id: string; name: string }>>([])

  // 获取分组列表
  const fetchGroups = async () => {
    try {
      const response = await fetch('/api/scene-groups')
      const data = await response.json()
      setGroups(data)
    } catch (error) {
      console.error('获取分组失败:', error)
    }
  }

  // 在弹框打开时获取分组列表
  React.useEffect(() => {
    if (open) {
      fetchGroups()
    }
  }, [open])

  const handleSubmit = async (values: any) => {
    setLoading(true)
    try {
      await onConfirm(values)
      form.resetFields()
      onClose()
    } catch (error) {
      message.error('创建场景失败')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Modal
      title="添加场景"
      open={open}
      onCancel={onClose}
      onOk={form.submit}
      okText="创建"
      cancelText="取消"
      confirmLoading={loading}
      className="scene-modal"
      styles={{
        content: {
          background: 'rgba(0, 0, 0, 0.8)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          borderRadius: '12px',
        },
        header: {
          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
          color: 'rgba(255, 255, 255, 0.9)'
        },
        footer: {
          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
        },
        mask: {
          backgroundColor: 'rgba(0, 0, 0, 0.6)',
          backdropFilter: 'blur(4px)'
        }
      }}
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        className="mt-4"
      >
        <Form.Item
          label={<span className="text-white/80">场景名称</span>}
          name="name"
          rules={[{ required: true, message: '请输入场景名称' }]}
        >
          <Input 
            placeholder="请输入场景名称"
            className="scene-input"
          />
        </Form.Item>

        <Form.Item
          label={<span className="text-white/80">描述</span>}
          name="description"
        >
          <Input.TextArea 
            placeholder="请输入场景描述（可选）"
            className="scene-input"
            rows={4}
          />
        </Form.Item>

        <Form.Item
          label={<span className="text-white/80">分组</span>}
          name="groupId"
        >
          <Select 
            placeholder="选择分组（可选）"
            className="scene-select"
            options={groups.map(group => ({
              value: group.id,
              label: group.name
            }))}
          />
        </Form.Item>
      </Form>
    </Modal>
  )
} 